const nodelist = document.querySelectorAll('.topbar_list_item');

var focus_element;
nodelist.forEach((element,index) => {
    element.addEventListener('click',()=>{
        element.classList.add('active');
        focus_element = index;
        deactive();
    });
});

function deactive(){
    for(var i = 0; i < nodelist.length; i++)
    {
        if(focus_element != i)//如果当前不是聚焦元素
        {
            nodelist[i].classList.remove('active');
        }
    }
}


//图片点击放大效果
const pic_nodelist = document.querySelectorAll('.pic');
var focus_pic;
var clicked = false;
pic_nodelist.forEach((element,index) => {
    element.addEventListener('click',()=>{
        if(!clicked){
            element.classList.add('active');
            focus_pic = index;
            clicked = !clicked;
            pic_deactive(true);//表示正常移除其它元素
        }
        else{
            element.classList.remove('active');
            focus_pic = index;
            clicked = !clicked;
            pic_deactive(false);//表示不移除其它元素
        }
       
        
    });
});

function pic_deactive(flag){
    for(var i = 0; i < pic_nodelist.length; i++)
    {
        if(focus_pic != i && flag)//如果当前不是聚焦元素
        {
            pic_nodelist[i].classList.add('deactive');
        }
        else{
            pic_nodelist[i].classList.remove('deactive');

        }

    }
}